---
import '$styles/app.css'
import Loader from './_Loader.svelte'
import { getAllAppModules } from './_appModules'

export async function getStaticPaths() {
  const examples = getAllAppModules()
  const keys = Object.keys(examples) as string[]
  const slugs = keys.map((key) => key.replace('../../../examples/', '').replace('/App.svelte', ''))

  return slugs.map((slug) => {
    return {
      params: { slug }
    }
  })
}

const slug = Astro.params.slug
---

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <div>
      <Loader
        client:load
        {slug}
      />
    </div>
  </body>
</html>

<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
